// 压力情景测试
import React from 'react';
import { connect } from 'dva';
import colorsAll from '../../css/colors';
import { TableC, XYAxisChartsC, FirstHeaderC, SecondHeaderC } from '../../comps';
import { fixedNum } from '../../utils/utils';
class AssetsFluidity extends React.Component {
  constructor() {
    super();
    this.state = {
      dataSource1: [],
      total: 0,
      columns1: [
        { title: '类别', key: 'type', dataIndex: 'type' },
        { title: '证券代码', key: 'tradingCode', dataIndex: 'tradingCode' },
        { title: '证券简称', key: 'secuabbr', dataIndex: 'secuabbr' },
        { title: '规模（万元）', key: 'scale', dataIndex: 'scale' },
        { title: '占比（%）', key: 'ratio', dataIndex: 'ratio' },
      ],
      columns2: [
        { title: '', key: 'type', dataIndex: 'type' },
        { title: '当前时点', key: 'nowTime', dataIndex: 'nowTime' },
        { title: '轻度赎回', key: 'lowRedemption', dataIndex: 'lowRedemption' },
        { title: '中度赎回', key: 'middleRedemption', dataIndex: 'middleRedemption' },
        { title: '重度赎回', key: 'highRedemption', dataIndex: 'highRedemption' },
      ],
      series: [],
      xAxis: [],
    };
  }
  componentDidMount() {
    this.props.onRef(this);
  }

  // 重新查询
  refresh = (e) => {
    this.getTableData(e);
  };

  // 获取表格数据
  getTableData = (searchObj) => {
    this.props.dispatch({
      type: `stressSceneTestM/getAssetsFluidityList`,
      payload: searchObj,
      callback: (data) => {
        let series = [
          {
            data: [],
          },
        ];
        let xAxis = [];
        if (data) {
          if (data.dataSource && data.dataSource.length > 0) {
            data.dataSource.map((item) => {
              if (item.children && item.children.length == 0) item.children = null;
              xAxis.push(item.type);
              series[0].data.push(item.scale);
            });
          }
          this.setState({
            dataSource1: data.dataSource,
            series: series,
            xAxis: xAxis,
          });
        }
      },
    });
    this.props.dispatch({
      type: `stressSceneTestM/getInvestorRedemptionList`,
      payload: searchObj,
      callback: (data) => {
        if (data) {
          this.setState({
            dataSource2: data.dataSource,
          });
        }
      },
    });
  };

  //修改columns的状态
  changeColumns1 = (columns) => {
    let data = columns;
    if (data && data.length) {
      data.map((item) => {
        if (item.key == 'scale') {
          item.type = 'money';
        }
        if (item.key == 'ratio') {
          item.type = 'number';
          item.render = (text, record) => {
            return text ? fixedNum(text * 100) : '--';
          };
        }
      });
    }
    return data;
  };

  changeColumns2 = (columns) => {
    let data = columns;
    let arrList = [];
    if (data && data.length) {
      let obj1 = {
        dataIndex: 'first',
        key: 'first',
        align: 'center',
        children: [],
      };
      let obj2 = {
        dataIndex: 'stressTest',
        key: 'stressTest',
        title: '投资者赎回压力测试',
        align: 'center',
        children: [],
      };
      data.map((item, index) => {
        if (item.key == 'nowTime') {
          item.align = 'right';
          item.render = (text, record) => {
            if (record.id == 1) {
              return text ? fixedNum(text * 1) : '--';
            } else {
              return text ? (text * 100).toFixed(2) : '--';
            }
          };
          obj1.children.push(item);
        }
        if (item.key == 'type') {
          obj1.children.push(item);
        }
        if (item.key == 'lowRedemption' || item.key == 'middleRedemption' || item.key == 'highRedemption') {
          item.align = 'right';
          item.render = (text, record) => {
            if (record.id == 1) {
              return text ? fixedNum(text * 1) : '--';
            } else {
              return text ? (text * 100).toFixed(2) : '--';
            }
          };
          obj2.children.push(item);
        }
      });
      arrList.push(obj1, obj2);
    }
    return arrList;
  };

  //图标自定义提示信息
  toolTipFormat = (params) => {
    let str = `<div style="color:${colorsAll.echartItems.tooltipLabel}">`;
    str += `<div>${params[0].name}</div>`;
    params.map((item, index) => {
      str += `${item.marker}规模: ${item.data ? item.data.toFixed(2) + '万元' : '--'}`;
      str += index === params.length - 1 ? '' : '<br/>';
    });
    str += '</div>';
    return str;
  };

  render() {
    const { columns1, dataSource1, columns2, dataSource2, series, xAxis } = this.state;
    const newColumns1 = this.changeColumns1(columns1);
    const newColumns2 = this.changeColumns2(columns2);
    return (
      <div>
        <SecondHeaderC title='资产流动性' />
        <div className='assets-box'>
          <div style={{ width: '50%', marginRight: '10px' }}>
            <TableC columns={newColumns1} dataSource={dataSource1} rowKey='id' scroll={{ y: 290 }} hidePage={true}></TableC>
          </div>
          <div style={{ width: '50%', marginLeft: '10px' }}>
            <XYAxisChartsC height={335} series={series} xAxis={xAxis} type='bar' yAxisUnit={['单位（万元）']} toolTipFormat={(params) => this.toolTipFormat(params)} />
          </div>
        </div>
        <SecondHeaderC title='投资者赎回' topHeight={true} />
        <TableC columns={newColumns2} dataSource={dataSource2} rowKey='id' scroll={{ x: 'max-content' }} hidePage={true}></TableC>
      </div>
    );
  }
}
export default connect(({ stressSceneTestM, loading }) => ({
  stressSceneTestM,
  loading,
}))(AssetsFluidity);
